<template>
  <div class="demo">
    <template>
      <div v-if="mode === 'edit'">
        <div v-if="linkList && linkList.length > 0">
          <div
            v-if="linkRead"
            style="color: #c0c4cc"
            v-for="item in linkList"
            :key="item"
          >
            <div :style="{ textAlign: linkAlign }">{{ item.linkStr }}</div>
          </div>
          <div v-else :style="{ textAlign: linkAlign }">
            <a
              :href="item.linkHref"
              :target="linkTarget"
              style="text-decoration: underline"
              :class="
                linkStatus == 'primary'
                  ? 'blue'
                  : linkStatus == 'success'
                  ? 'green'
                  : linkStatus == 'warning'
                  ? 'orange'
                  : linkStatus == 'danger'
                  ? 'pink'
                  : 'gray'
              "
              >{{ item.linkStr }}</a
            >
          </div>
        </div>
        <div v-else>
          <div
            v-if="linkRead"
            style="color: #c0c4cc;"
            :style="{ textAlign: linkAlign }"
          >
            {{ linkStr }}
          </div>
          <div  v-else  :style="{ textAlign: linkAlign }">
            <a
              :href="linkHref"
              :target="linkTarget"
              :type="linkStatus"
              style="text-decoration: underline;"
              :class="
                linkStatus == 'primary'
                  ? 'blue'
                  : linkStatus == 'success'
                  ? 'green'
                  : linkStatus == 'warning'
                  ? 'orange'
                  : linkStatus == 'danger'
                  ? 'pink'
                  : 'gray'
              "
              >{{ linkStr }}</a
            >
          </div>
        </div>
        <!-- <el-link :href="linkHref" :target="linkTarget" :type="linkStatus">{{ linkStr }}</el-link> -->
      </div>
      <div v-else>
        {{ value }}
      </div>
    </template>
  </div>
</template>
<script>
import datasource from "../../mixins/steps-datasource";
export default {
  name: "pm-link",
  mixins: [datasource],
  props: {
    value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    linkStr: {
      default: "默认链接",
    },
    linkHref: {
      default: "",
    },
    linkTarget: {},
    linkStatus: {},
    linkRead: {
      type: Boolean,
      default: false,
    },
    linkAlign: {
    default: "",
  },
  },
  icon: "",
  viewId: {},
  viewCode: {
    default: "view",
  },
  
  mounted() {
    console.log(this.value, "this.value");
    if (this.value) {
      this.linkStr = JSON.parse(this.value);
    }
  },
  methods: {},
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length) {
          this.linkList = val.map((item) => {
            return {
              linkHref: item._data.linkHref,
              linkStr: item._data.linkStr,
            };
          });
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
}
.blue {
  color: #409eff;
}
.green {
  color: #85ce61;
}
.orange {
  color: #ebb563;
}
.pink {
  color: #f78989;
}
.gray {
  color: #a6a9ad;
}
</style>
